/**
 * 通用组件加载器
 * 用于动态加载和管理可复用的HTML组件
 */

class ComponentLoader {
    constructor() {
        this.cache = new Map();
    }

    /**
     * 加载HTML组件
     * @param {string} componentName - 组件名称
     * @param {string} targetSelector - 目标容器选择器
     * @param {Function} callback - 加载完成后的回调函数
     */
    async loadComponent(componentName, targetSelector, callback = null) {
        try {
            let html;
            
            // 检查缓存
            if (this.cache.has(componentName)) {
                html = this.cache.get(componentName);
            } else {
                // 从服务器加载组件
                console.log(`正在加载组件: ${componentName}`);
                const response = await fetch(`/static/components/${componentName}.html`);
                if (!response.ok) {
                    throw new Error(`Failed to load component: ${componentName}`);
                }
                html = await response.text();
                // 缓存组件内容
                this.cache.set(componentName, html);
            }

            // 插入HTML到目标容器
            const targetElement = document.querySelector(targetSelector);
            if (targetElement) {
                console.log(`插入组件 ${componentName} 到目标容器: ${targetSelector}`);
                targetElement.innerHTML = html;
                
                // 执行回调函数
                if (callback && typeof callback === 'function') {
                    callback();
                }
            } else {
                console.warn(`Target element not found: ${targetSelector}`);
            }
        } catch (error) {
            console.error(`Error loading component ${componentName}:`, error);
        }
    }

    /**
     * 同时加载多个组件
     * @param {Array} components - 组件配置数组 [{name, target, callback}, ...]
     */
    async loadComponents(components) {
        const promises = components.map(config => 
            this.loadComponent(config.name, config.target, config.callback)
        );
        await Promise.all(promises);
    }

    /**
     * 设置导航链接的active状态
     * @param {string} activePageId - 当前激活页面的ID
     */
    setActiveNav(activePageId) {
        // 移除所有active类
        document.querySelectorAll('.nav-link').forEach(link => {
            link.classList.remove('active');
        });
        
        // 为当前页面添加active类
        const activeLink = document.getElementById(activePageId);
        if (activeLink) {
            activeLink.classList.add('active');
        }
    }
}

// 创建全局实例
window.componentLoader = new ComponentLoader();

/**
 * 页面初始化函数
 * 自动加载header和footer组件
 */
async function initializePage(activePageId) {
    console.log(`初始化页面，设置激活页面ID: ${activePageId}`);
    
    // 直接加载通用组件，不再监听DOMContentLoaded
    await window.componentLoader.loadComponents([
        {
            name: 'header',
            target: '[data-component="header"]',
            callback: () => {
                console.log('Header组件加载完成，设置导航active状态');
                // Header加载完成后设置active导航
                window.componentLoader.setActiveNav(activePageId);
            }
        },
        {
            name: 'footer',
            target: '[data-component="footer"]',
            callback: () => {
                console.log('Footer组件加载完成');
            }
        }
    ]);
    
    console.log('页面初始化完成');
}

// 导出初始化函数
window.initializePage = initializePage;